<template>
 <div style="width: 100%;">
    <div v-if="!data.isMobile" style="height: 25px;"></div>
    <div v-if="!data.isMobile" style="width: 100%;border-radius: 5px;background-color: #eef7ff;padding: 16px 20px;">
      <div style="width: 100%;text-align: center;">
            <a-input allow-clear v-model="searchForm.majorName" style="width: 60%;height: 40px;background-color: white;border: 0;margin-bottom: 10px;border-radius: 5px 0 0 5px;" placeholder="请输入专业名称"></a-input><a-button style="height: 40px;padding: 0 20px;border-radius: 0 5px 5px 0;" type="primary" :loading="isSearching" @click="
        this.searchForm.current=1;searchMajorContents();">搜索</a-button>
      </div>
      <div style="line-height: 30px;">
        <div>层次</div>
        <a-radio-group v-model="searchForm.remark" @change="searchMajorContents">
            <a-radio value="本科">本科</a-radio>
            <a-radio value="专科">专科</a-radio>
        </a-radio-group>
      </div>
    </div>
    
    <div v-if="!data.isMobile" style="width: 100%;position: relative;margin-top: 20px;">
            <div style="width: calc(100% - 320px);display: inline-block;margin-right: 0px;float: right;">
                <div style="line-height: 30px;margin-bottom: 20px;">
                    搜索结果
                </div>
                
                <div>

                  <div v-bind:key="item" v-for="item in majorContents" style="width: 100%;border-radius: 5px;border: 1px solid rgb(230,230,230);margin-bottom: 20px;">
                    <div style="padding: 20px 20px;border-bottom: 1px solid rgb(230,230,230);font-size: 20px;font-weight: bold;margin-bottom: 10px;position: relative;">
                      {{ item.class }}
                      <div style="padding: 20px 20px;position: absolute;right: 0;top: 0;font-weight: normal;font-size: 14px;line-height: 22px;color: dimgray;">
                        {{ item.majorClass.length }}个专业类
                      </div>
                    </div>
                    <div v-bind:key="subitem" v-for="subitem in item.majorClass" style="padding: 10px 20px;position: relative;margin-bottom: 10px;">
                      <div style="width: 200px;position: absolute;left: 20px;top: 10px;line-height: 30px;padding-right: 20px;">
                        {{ subitem.majorClass + "("+subitem.majors.length+"个专业)" }}
                      </div>
                      <div style="width: calc(100% - 200px);margin-left: 200px;position: relative;border-left: 1px solid rgb(230,230,230);padding-left: 20px;">
                        <span v-bind:key="subsubitem" v-for="subsubitem in subitem.majors">
                          <div style="width: 33.3%;display: inline-block;line-height: 30px;">
                            <span style="cursor: pointer;" @click="showMajorIntroductionPage(subsubitem.majorName)">
                              {{ subsubitem.majorName }}
                            </span>
                            
                          </div>
                        </span>
                      </div>
                    </div>
                  </div>

                </div>

                <div style="width: 100%;height: 120px;">

                </div>
            </div>
            <div style="width: 300px;display: inline-block;position: absolute;left: 0;top: 0;">
                <userInfoSection2 :user-info="data.loginedUserInfo"></userInfoSection2>
                <div style="width: 100%;border-radius: 5px;margin-bottom: 20px;">
                    <div>
                        <div class="menu-item" @click="changePage(9)">
                            我收藏的专业
                            <svg style="position: absolute;right: 11.38px;top: 11.38px;" width="14" height="14" viewBox="0 0 48 48" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M32.556 24L16.293 7.737a1 1 0 010-1.415l1.414-1.414a1 1 0 011.414 0L36.8 22.586a2 2 0 010 2.828L19.121 43.092a1 1 0 01-1.414 0l-1.414-1.414a1 1 0 010-1.414L32.556 24z" fill="currentColor"/></svg>
                        </div>
                    </div>
                </div>
               <div v-if="data.news.length!=0" style="width: 100%;border-radius: 5px;border: 1px solid rgb(230,230,230);padding: 20px 20px;">
                
            <div style="line-height: 30px;">
                高考资讯
            </div>
            <div style="padding: 20px 0;position: relative;" v-bind:key="item" v-for="item in data.news" @click="openLink('https://www.sdjyxww.com/' + item.url)">
                <div style="display: inline-block;width: 30px;line-height: 100%;font-size: 16px;margin-top: 5px;">
                    {{ item.order }}
                </div>
                <div style="display: inline-block;float: right;width: calc(100% - 30px);line-height: 20px;cursor: pointer;">
                    {{ item.title }}
                </div>
            </div>
        </div> 
                <div style="width: 100%;height: 120px;">

                </div>
            </div>
            
    </div>

    <div v-if="data.isMobile" style="width: 100vw;height: 100vh;position: relative;">
      <div style="width: 100%;padding: 20px 20px;padding-bottom: 10px;">
            <span style="margin-right: 10px;;border-radius: 5px;font-size: 18px;" @click="changePage(2)">院校查询</span>
            <span style="margin-right: 10px;;border-radius: 5px;font-size: 22px;font-weight: bold;">专业查询</span>
            <span style="margin-right: 10px;;border-radius: 5px;font-size: 18px;" @click="changePage(4)">收藏夹</span>
        </div>
        <div style="width: 100%;height: calc(100% - 55px - 55.29px);overflow-y: scroll;">
          <div style="padding: 10px 10px;">
              <div style="width: 100%;text-align: center;">
            <a-input allow-clear v-model="searchForm.majorName" :style="{width:isSearching?'calc(100% - 92px)':'calc(100% - 70px)'}" style="height: 40px;background-color: white;border: 1px solid rgb(230,230,230);margin-bottom: 10px;border-radius: 5px 0 0 5px;border-right: 0;" placeholder="请输入专业名称"></a-input><a-button style="height: 40px;padding: 0 20px;border-radius: 0 5px 5px 0;" type="primary" :loading="isSearching" @click="
        this.searchForm.current=1;searchMajorContents();">搜索</a-button>
      </div>
            <div style="padding: 10px 10px;border-radius: 5px;border: 1px solid rgb(230,230,230);margin-bottom: 10px;">
      <div style="line-height: 30px;">
        <div>层次</div>
        <a-radio-group v-model="searchForm.remark" @change="searchMajorContents">
            <a-radio value="本科">本科</a-radio>
            <a-radio value="专科">专科</a-radio>
        </a-radio-group>
      </div>
            </div>
      搜索结果
      <div style="margin-top: 10px;">
        <div v-bind:key="item" v-for="item in majorContents" style="width: 100%;border-radius: 5px;border: 1px solid rgb(230,230,230);margin-bottom: 20px;border-bottom: 0;">
                    <div style="padding: 10px 10px;border-bottom: 1px solid rgb(230,230,230);font-size: 16px;font-weight: bold;margin-bottom: 10px;position: relative;">
                      {{ item.class }}
                      <div style="padding: 10px 10px;position: absolute;right: 0;top: 0;font-weight: normal;font-size: 14px;line-height: 22px;color: dimgray;">
                        {{ item.majorClass.length }}个专业类
                      </div>
                    </div>
                    <div v-bind:key="subitem" v-for="subitem in item.majorClass" style="padding: 0px 0px;position: relative;margin-bottom: 10px;">
                      <div style="width: 200px;line-height: 30px;padding-right: 10px;padding: 10px 10px;padding-bottom: 0;font-weight: bold;padding-top: 0;">
                        {{ subitem.majorClass + "("+subitem.majors.length+"个专业)" }}
                      </div>
                      <div style="width: calc(100%);position: relative;border-bottom: 1px solid rgb(230,230,230);line-height: 30px;padding: 10px 10px;padding-top: 0;">
                        <span v-bind:key="subsubitem" v-for="subsubitem in subitem.majors">
                          <div style="width: 50%;display: inline-block;line-height: 20px;">
                            <span style="cursor: pointer;" @click="showMajorIntroductionPage(subsubitem.majorName)">
                              {{ subsubitem.majorName }}
                            </span>
                            
                          </div>
                        </span>
                      </div>
                    </div>
                  </div>
      </div>
          </div>
        </div>
    </div>
 </div>
</template>

<script>
import userInfoSection2 from '@/components/userInfoSection2.vue';
import axios from 'axios';

export default{
    components:{
      userInfoSection2
    },
  data(){
    return{
        searchForm:{
          majorName:'',
          remark:'本科'
        },
        majorContents:[],
        isSearching:false,
    }
  },
  mounted(){
    this.searchMajorContents();
  },
  methods:{
    searchMajorContents(){
      this.isSearching=true;
      var config = {
   method: 'get',
   url: '/api/v1/majorContents/userSearch?data=' + JSON.stringify(this.searchForm),
   headers: { 
      'Accept': '*/*', 
   }
};

axios(config)
.then((res) => {
  this.isSearching=false;
   if(res.data.status==1){
    console.log(res.data.results)
    this.majorContents=res.data.results
   }else{
    this.$message.error({
      content:res.data.content
    })
   }
})
    },
    openLink(url){
        window.open(url);
    }
  },
  props:{
    data:undefined,
    changePage:undefined,
    showMajorIntroductionPage:undefined,
  },
}
</script>

<style scoped>

.menu-item:hover{
    background-color: rgb(0,110,205);
}

.menu-item{
    width: 100%;
    padding: 10px 10px;
    border-radius: 5px;
    cursor: pointer;
    background-color: rgb(0,120,215);
    color: white;
    position: relative;
}

.university-item:active{
    scale: 0.99;
}

.university-item{
    transition: scale .1s;
}

</style>